<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UserForm</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<style>
   tbody tr:nth-child(odd){background:#d9edf7;}
   tbody tr:nth-child(even){background-color:#fcf8e3;}
   .checkbox{
       margin-top: 0px;
   }
   button{
       margin: 2px;
   }
</style>
<script>
    function add(){
        var a = document.getElementById("num").value;
        var b = document.getElementById("name").value;
        var c = document.getElementById("sex").value;
        var d = document.getElementById("code").value;
        var e = document.getElementById("age").value;
        var f = document.getElementById("date").value;
        $("tbody").append(
           `<tr>
                <td class="checkbox">
                    <label>
                        <input type="checkbox" name="one"> 
                    </label>                                           
                </td>
                <td class="Id">${a}</td> 
                <td class="mingzi">${b}</td> 
                <td>${c}</td>
                <td>${d}</td>
                <td>${e}</td>
                <td>${f}</td>
            </tr>`
        );
    }

    function shan(){
        var arr = document.getElementsByName("one");
        for(var i=0; i<arr.length;i++){
            if(arr[i].checked){
                $(arr[i]).parents("tr").remove();
            }
        }
    }

    function edit(){
        var a = document.getElementById("num").value;
        var b = document.getElementById("name").value;
        var c = document.getElementById("sex").value;
        var d = document.getElementById("code").value;
        var e = document.getElementById("age").value;
        var f = document.getElementById("date").value;
        var arr = document.getElementsByName("one");
        for(var i=0; i<arr.length;i++){
            if(arr[i].checked){
                $(arr[i]).parents("tr").replaceWith(
                    `<tr>
                <td class="checkbox">
                    <label>
                        <input type="checkbox" name="one"> 
                    </label>                                           
                </td>
                <td class="Id">${a}</td> 
                <td class="mingzi">${b}</td> 
                <td>${c}</td>
                <td>${d}</td>
                <td>${e}</td>
                <td>${f}</td>
            </tr>`  
                )
            }
        }
    }

    function lookup(){
        if(document.getElementById("lookID").value!=""){
            var hao = document.getElementById("lookID").value;
            var nums = document.getElementsByClassName("Id");
            
            for(var i=0;i<nums.length;i++){
                if(nums[i].innerHTML!=hao){
                    $(nums[i]).parent().slideUp(100);
                }
            }
               
        }else{
            var ming = document.getElementById("lookName").value; 
            var names = document.getElementsByClassName("mingzi");

            for(var i=0;i<names.length;i++){
                if(names[i].innerHTML!=ming){
                    $(names[i]).parent().slideUp(100);
                }
            }
        }
    }
</script>
<body>
    <div class="table">
        <table class="table table-responsive"> 
            <caption style="margin-top: 0px; font-size: 20px;">习题
                <br>
                <button class="btn btn-info" data-toggle="modal" data-target="#myModal">新增</button>
                <button class="btn btn-info" onclick="shan()">删除</button>
                <button class="btn btn-info" data-toggle="modal" data-target="#myModal">编辑</button>
                <button class="btn btn-info" onclick="lookup()">查询</button>
                <input placeholder="按工号查询" id="lookID">
                <input placeholder="按姓名查询" id="lookName">
            </caption> 
            <thead>
                <tr> 
                    <th>序号</th>
                    <th>工号</th>
                    <th>姓名</th> 
                    <th>性别</th> 
                    <th>密码</th> 
                    <th>年龄</th> 
                    <th>出生日期</th> 
                </tr>
            </thead>
            <tbody >
                <tr>
                    <td class="checkbox">
                        <label>
                            <input type="checkbox" name="one"> 
                        </label>                                           
                    </td>
                    <td class="Id">1001</td> 
                    <td class="mingzi">张三</td> 
                    <td>女</td>
                    <td>1234</td>
                    <td>29</td>
                    <td>1991-1-1</td>
                </tr>
                <tr>
                    <td class="checkbox">
                        <label>
                            <input type="checkbox" name="one">   
                        </label>
                    </td>
                    <td class="Id">1002</td> 
                    <td class="mingzi">李四</td> 
                    <td>男</td>
                    <td>1234</td>
                    <td>28</td>
                    <td>1991-2-2</td>
                </tr>
                <tr>
                    <td class="checkbox">
                        <label>
                            <input type="checkbox" name="one">  
                        </label>
                    </td>
                    <td class="Id">1003</td> 
                    <td class="mingzi">王五</td> 
                    <td>女</td>
                    <td>1234</td>
                    <td>27</td>
                    <td>1991-3-3</td>
                </tr>
                <tr>
                    <td class="checkbox">
                        <label>
                            <input type="checkbox" name="one">  
                        </label>
                    </td>
                    <td class="Id">1004</td> 
                    <td class="mingzi">赵六</td> 
                    <td>女</td>
                    <td>1234</td>
                    <td>26</td>
                    <td>1991-4-4</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="modal" id="myModal" data-backdrop="static" style="background-color: whitesmoke;">
        <div class="modal-header">
            <button class="close" data-dismiss="modal">
                <span>&times;</span>
            </button>
            <h4>增加或编辑用户</h4>
        </div>
        <div class="modal-body">
            <input placeholder="员工工号" id="num">
            <input placeholder="员工姓名" id="name">
            <input placeholder="员工性别" id="sex">
            <input placeholder="员工密码" id="code">
            <input placeholder="员工年龄" id="age">
            <input placeholder="员工出生日期" id="date">
        </div>
        <div class="modal-footer">
            <button class="btn btn-success" onclick="add()" data-dismiss="modal">确定</button>
            <button class="btn btn-info" onclick="edit()" data-dismiss="modal">编辑</button>
            <button class="btn btn-default" data-dismiss="modal">取消</button>
        </div>
    </div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>